<template>
  <div>
    <div id="add"><myButton/></div>
    <div>
      <span style="font-size: larger">品类：</span>
      <div style="display: inline-block;margin-left: 15px" v-for="(item,index) in cateNameList" :key="index">
        <el-button plain  @click="searchGategoryName(item.categoryName)">{{item.categoryName}}</el-button>
      </div>
    </div>
    <div style="margin-top: 20px">
      <span style="font-size: larger">规格：</span>
      <div style="display: inline-block;margin-left: 15px" v-for="(item,index) in scfcNameList" :key="index">
        <el-button plain @click="searchScfcName(item.scfcName)">{{item.scfcName}}</el-button>
      </div>
    </div>
    <div style="margin: 20px 0">
      <span style="font-size: larger">搜索：</span>
      <el-input v-model="input" placeholder="请输入内容" style="width: 250px;margin-left: 15px"></el-input>
      <el-button icon="el-icon-search" style="margin-left: 15px" circle @click="searchName"></el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="产品编码"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.productCode }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="品牌"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="品类"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="品名"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="产品规格"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.scfcName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="产品描述"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.productDescribe }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单价"
        width="120">
        <template slot-scope="scope">
          <span >￥{{ scope.row.productPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="库存"
        width="120">
        <template slot-scope="scope">
          <span >{{ scope.row.productRepertory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" style="width: 200px">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5,10, 15]"
      :page-size="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="zpage">
    </el-pagination>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <p><span style="font-size: larger">产品品牌：</span> {{editProductList.brandName}}</p>
        <p><span style="font-size: larger">产品品类：</span> {{editProductList.categoryName}}</p>
        <p><span style="font-size: larger">产品规格：</span> {{editProductList.categoryName}}</p>
        <div>
          <p><span style="font-size: larger">产品名称:</span> {{editProductList.productName}}</p>
          <el-input v-model="editProductList.ProductName" placeholder="请输入新的产品名"></el-input>
        </div>
        <div>
          <p><span style="font-size: larger">产品单价:</span> {{editProductList.productPrice}}</p>
          <el-input v-model="editProductList.ProductPrice" placeholder="请输入新的单价"></el-input>
        </div>
        <div>
          <p><span style="font-size: larger">产品描述:</span>{{editProductList.productDescribe}}</p>
          <el-input v-model="editProductList.ProductDescribe" placeholder="请输入新的产品名"></el-input>
        </div>
        <div>
          <input type="file" @change="getFile($event)" name="images">
          <img :src="imageUrl" v-if="imageUrl" style="height: 150px;width: 150px;" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="affirmNew">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>

</template>
<script>
import myButton from './../../components/button'
export default {
  list: [],
  cateNameList: [],
  scfcNameList: [],
  created: function () {
    this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
      .then((res) => {
        this.list = res.data.data
        window.console.log(res.data.data)
        this.zpage = Math.ceil(res.data.count)
      })
    this.$axios.post('product/queryCategory')
      .then((res) => {
        // window.console.log(res.data.data)
        this.cateNameList = res.data.data
      })
    this.$axios.post('product/querySpecification', { limit: 99, page: 1 })
      .then((res) => {
        window.console.log(res.data.data)
        this.scfcNameList = res.data.data
      })
  },
  data () {
    return {
      list: this.list,
      input: '',
      cateNameList: this.cateNameList,
      scfcNameList: this.scfcNameList,
      currentPage: 10,
      page: 1,
      zpage: 1,
      imageUrl: '',
      editProductList: [],
      dialogVisible: false,
      newProductName: '',
      newProductPrice: '',
      newProductDescribe: '',
      file: ''
    }
  },
  methods: {
    handleDelete (index, row) {
      let productId = row.productId
      this.$axios.post('product/delProductInfo', { productId: productId })
        .then((res) => {
          // window.console.log(res)
          if (res.data.code === 200) {
            alert('下架成功')
            this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
              .then((res) => {
                this.list = res.data.data
                window.console.log(res.data.data)
                this.zpage = Math.ceil(res.data.count)
              })
          }
        })
    },
    searchName () {
      window.console.log(this.input)
      let search = this.input
      this.$axios.post('product/queryProductInfos', {
        page: this.page, limit: this.currentPage, categoryName: '', productName: search, scfcName: ''
      }).then((res) => {
        window.console.log(res.data.data)
        this.list = res.data.data
      })
    },
    // 品类搜索函数
    searchGategoryName (name) {
      window.console.log(name)
      this.$axios.post('product/queryProductInfos', {
        page: this.page, limit: this.currentPage, categoryName: name, productName: '', scfcName: ''
      }).then((res) => {
        window.console.log(res.data.data)
        this.list = res.data.data
      })
    },
    searchScfcName (name) {
      window.console.log(name)
      this.$axios.post('product/queryProductInfos', {
        page: this.page, limit: this.currentPage, categoryName: '', productName: '', scfcName: name
      }).then((res) => {
        //   window.console.log(res.data.data)
        this.list = res.data.data
      })
    },
    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage = newsize
      var that = this
      this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
        .then(function (res) {
          that.list = res.data.data
          that.zpage = Math.ceil(res.data.count)
        })
    },
    handleCurrentChange (newpage) {
      window.console.log(newpage)
      this.page = newpage
      var that = this
      this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
        .then(function (res) {
          that.list = res.data.data
          // 数据
          that.zpage = res.data.count
          // 总共有多少条
        })
    },
    handleEdit (index, row) {
      // window.console.log(index,row);
      this.dialogVisible = true
      this.editProductList = row
      window.console.log(this.editProductList)
    },
    affirmNew (event) {
      event.preventDefault()
      this.dialogVisible = false
      let data = new FormData()
      data.append('productId', this.editProductList.productId)
      data.append('productName', this.editProductList.productName)
      data.append('productPrice', this.editProductList.productPrice)
      data.append('productDesribe', this.editProductList.productDescribe)
      data.append('images', this.file)
      this.$axios.post('product/editProductInfo', data)
        .then((res) => {
          window.console.log(res)
          if (res.data.code === 200) {
            alert(res.data.msg)
            this.$axios.post('product/queryProductInfo', { page: this.page, limit: this.currentPage })
              .then((res) => {
                this.list = res.data.data
                window.console.log(res.data.data)
                this.zpage = Math.ceil(res.data.count)
              })
          } else {
            alert(res.data.msg)
          }
        })
    },
    getFile () {
      var windowURL = window.URL || window.webkitURL
      this.file = event.target.files[0]
      this.imageUrl = windowURL.createObjectURL(event.target.files[0])
    }
  },
  components: {
    myButton
  }

}
</script>
<style>
  .el-pagination{
    margin: 25px 0;
    text-align: center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  #add{
    position:absolute;
    top: 10%;
    right: 10%;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
